<template>
  <div style="width: 100%;">
    <!--面包屑-->
    <div style="height: 30px;width: 98%;background-color: white;padding-top: 13px;padding-left: 2%;">
      <i class="el-icon-s-home lf" style="font-size: 18px;margin-right: 10px;"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item >典当物品管理</el-breadcrumb-item>
        <el-breadcrumb-item >新增典当物品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--总物品详情-->
    <div style="padding: 20px;min-height: 863px;">
      <div style="min-height: 90%;width: 100%;">
        <i class="el-icon-s-grid lf" style="font-size: 26px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 20px;"></i>
        <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #CCCCCC;height: 40px;;width: 98.2%;padding-top: 8px;padding-left: 1.85%;">
          <span style="font-size: 20px;font-weight: 500;color: black;">新增物品</span>
          <i @click="$router.push('/goods')" class="el-icon-close rf" style="font-size: 26px;font-weight: bold;font-weight:bold;margin-right: 20px;"></i>
        </div>
        <!--物品信息-->
        <div class="cl" style="width: 100%;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #E4E4E4;">
          <!--左小标题-->
          <div class="lf" style="height: 100%;width: 20%;border: 1px solid #E4E4E4;"></div>
          <!--右物品内容-->
          <div class="lf" style="border-left: 2px solid #CCCCCC;width: 80%;height: 100%;padding-left: 15%;width: 60%;min-height: 814px;">
            <!--物品信息-->
            <div v-if="step1" style="margin-top: 60px;">
              <div class="cl">
                <div class="lf">
                  <div class="lf" style="line-height: 60px;text-align: center;margin-left: -567px;height: 60px;width: 340px;background-color: #D7D7D7;">
                    物品信息
                  </div>
                  <i style="margin-top: -16px;margin-left: -263px;font-size: 95px;color: #D7D7D7;" class="el-icon-caret-right lf"></i>
                </div>
                <div>
                  <span style="margin-left: 10px;">物品品牌 </span>
                  <el-select
                  style="margin-left: 24px;width: 350px;margin-bottom: 30px;"
                  v-model="add.brandId"
                  @change="findCatTree(add.brandId)"
                  clearable
                  placeholder="请选择品牌">
                      <el-option
                        v-for="item in brand"
                        :key="item.brandId"
                        :label="item.brandName"
                        :value="item.brandId">
                      </el-option>
                    </el-select>
                </div>
              </div>
              <div>
                <span style="margin-left: 10px;">物品类别 </span>
                <el-cascader
                 style="margin-left: 24px;width: 350px;margin-bottom: 30px;"
                 v-model="addIds"
                 @change="changeCat"
                 :options="cats"
                 placeholder="请选择类别"
                 collapse-tags
                 clearable
                 :props='props'
                 >
                 </el-cascader>
              </div>
              <div>
                <span style="margin-left: 10px;">物品名称 </span>
                <el-input
                  style="margin-left: 24px;width: 350px;margin-bottom: 30px;"
                  placeholder="请输入物品名称"
                  v-model="add.goodsName"
                  clearable>
                </el-input>
              </div>
              <div style="margin-bottom: 30px;" class="cl">
                <div>
                  <span style="margin-left: 10px;">物品描述 </span>
                </div>
                <div class="lf">
                  <el-input
                    type="textarea"
                    style="width: 350px;
                      margin-left: 120px;margin-top: -20px;"
                    :autosize="{ minRows: 8, maxRows: 10}"
                    placeholder="请输入物品描述"
                    v-model="add.goodsDesc"
                    clearable>
                  </el-input>
                </div>
              </div>
              <div>
                <span style="margin-left: 10px;">顾客首买价 </span>
                <el-input
                  style="margin-left: 6px;width: 350px;margin-bottom: 30px;"
                  placeholder="请输入顾客首买价"
                  v-model="add.firstPrice"
                  clearable>
                </el-input>
                <span>元</span>
              </div>
              <el-button
              @click="nextPage"
              style="color: white;margin-top: 20px;margin-left: 250px;width: 100px;font-size: 18px;border-radius: 0%;background-color: #666666;"
              size="medium">下一步</el-button>
            </div>

            <!--物品属性-->
            <div v-if="step2" style="margin-top: 60px;">
              <div class="cl">
                <div class="lf">
                  <div class="lf" style="line-height: 60px;text-align: center;margin-left: -567px;height: 60px;width: 340px;background-color: #D7D7D7;">
                    物品属性
                  </div>
                  <i style="margin-top: -16px;margin-left: -263px;font-size: 95px;color: #D7D7D7;" class="el-icon-caret-right lf"></i>
                </div>
                <div
                  style="margin-left: 10px;margin-bottom: 20px;"
                  v-for="n in attrInfo">
                  <span style="margin-left: 23px;margin-right: 30px;">{{n.attributeName}} </span>
                  <template v-if="n.attributeType==0">
                    <el-input
                      @change="setMap(n.attributeId,n.value)"
                      v-if="n.attributeType==0"
                      style="margin-left: 6px;width: 350px;margin-bottom: 20px;"
                      placeholder="请输入属性值"
                      v-model="n.value"
                      clearable>
                    </el-input>
                  </template>
                  <template v-if="n.attributeType==1">
                    <el-radio
                      @change="setMap(n.attributeId,n.value)"
                      v-for="m in n.choices"
                      v-model="n.value"
                      :key="m" :label="m">{{m}}</el-radio>
                  </template>
                  <template v-if="n.attributeType==2">
                    <el-checkbox
                      @change="setMap(n.attributeId,n.value)"
                      v-for="(v,index) in n.choices"
                      v-model="n.value"
                      :key="index" :label="v">{{v}}</el-checkbox>
                  </template>
                </div>
              </div>
              <el-button
              @click="step2=false,step1=true"
              style="color: white;margin-top: 20px;margin-left: 180px;width: 100px;font-size: 18px;border-radius: 0%;background-color: #666666;"
              size="medium" plain>上一步</el-button>
              <el-button
              @click="nextPage2()"
              style="color: white;margin-top: 20px;margin-left: 10px;width: 100px;font-size: 18px;border-radius: 0%;background-color: #666666;"
              size="medium" plain>下一步</el-button>
            </div>

            <!--物品鉴定图-->
            <div v-if="step3" style="margin-top: 60px;">
              <div class="cl">
                <div class="lf">
                  <div class="lf" style="line-height: 60px;text-align: center;margin-left: -567px;height: 60px;width: 340px;background-color: #D7D7D7;">
                    物品鉴定图
                  </div>
                  <i style="margin-top: -16px;margin-left: -263px;font-size: 95px;color: #D7D7D7;" class="el-icon-caret-right lf"></i>
                </div>
                <div>
                  <div class="cl" style="margin-left: 40px;padding-top: 15px;">
                    <p style="margin-bottom: 40px;" v-if="pictures.mustChoice.length>0">必选鉴定图 </p>
                    <div v-for="(v,i) in pictures.mustChoice" style="margin-right: 20px;" class="lf" :key="i">
                      <p style="margin-bottom: 10px;margin-left: 70px;">{{v.pictureName}}
                        <span style="color: red;"> *</span>
                      </p>
                      <el-upload
                        v-if="isShow"
                        accept="image/jpeg,image/png"
                        class="avatar-uploader"
                        action="http://192.168.70.124:9090/goods/goods/addGoodsPicture"
                        name="picture"
                        :data="{id:v.id}"
                        :headers="header"
                        :show-file-list="false"
                        :on-success="dynamicPicSuccess.bind(null, {'index':i,'data':v})">
                        <img v-if="v.picUrl" :src="v.picUrl" class="avatar dynamic">
                        <i v-else class="el-icon-plus avatar-uploader-icon dynamic"></i>
                      </el-upload>
                    </div>
                  </div>
                  <div class="cl" style="margin-left: 40px;margin-top: 15px;">
                    <p style="margin-bottom: 40px;" v-if="pictures.couldChoice.length>0">可选鉴定图 </p>
                    <div v-for="(v,i) in pictures.couldChoice" style="margin-right: 20px;" class="lf" :key="i">
                      <p style="margin-bottom: 10px;margin-left: 70px;">{{v.pictureName}}</p>
                      <el-upload
                        v-if="isShow"
                        accept="image/jpeg,image/png"
                        class="avatar-uploader"
                        action="http://192.168.70.124:9090/goods/goods/addGoodsPicture"
                        name="picture"
                        :data="{id:v.id}"
                        :headers="header"
                        :show-file-list="false"
                        :on-success="dynamicPicSuccess1.bind(null, {'index':i,'data':v})">
                        <img v-if="v.picUrl" :src="v.picUrl" class="avatar dynamic">
                        <i v-else class="el-icon-plus avatar-uploader-icon dynamic"></i>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </div>
              <el-button
              @click="step3=false,step2=true"
              style="color: white;margin-top: 20px;margin-left: 180px;width: 100px;border-radius: 0%;background-color: #666666;"
              size="medium" plain>上一步</el-button>
              <el-button
              @click="saveGoods"
              style="color: white;margin-top: 20px;margin-left: 10px;width: 100px;border-radius: 0%;background-color: #666666;"
              size="medium" plain>确认</el-button>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default{
    name:"AddGoods",
    data(){
      return{
        //刷新组件
        isShow:true,
        //所有品牌集合
        brand:[],
        //新增物品对象
        add:{},
        //选中品牌对应的类别集合
        cats:[],
        //选中品牌对应的类别集合
        addIds:[],
        //类别集合各参数
        props:{
          //显示字段
          label:"name",
          //下级字段
          children:'children',
          //值对应的字段
          value:'id'
        },
        //物品信息填写界面是否显示
        step1:true,
        //物品属性填写界面是否显示
        step2:false,
        //物品属性填写界面是否显示
        step3:false,
        //选中属性组对应的属性集合
        attrInfo:[],
        //各属性值集合
        attrMap:{},
        //上传图片携带的请求头
        header:{},
        //多选属性的值
        // list:[],
        //需上传鉴定图集合
        pictures:[],
        //保存属性集合key
        attrKey:[],
      }
    },
    methods:{
      /**
       * 类别赋值
       */
      changeCat(){
        this.add.catId = this.addIds[0]
        this.add.subCatId = this.addIds[1]
        this.add.groupId = this.addIds[2]
        this.findBrandByIds()
        this.findConfigByGroupId()
      },
      /**
       * 必选鉴定图上传回调
       * @param {Object} v    遍历的对象
       * @param {Object} resp 函数返回对象
       * @param {Object} file 上传的文件
       */
      dynamicPicSuccess(v,resp,file) {
        var index = v.index;
        this.pictures.mustChoice[index].picUrl = resp.data;
        this.refresh()
      },
      /**
       * 可选鉴定图上传回调
       * @param {Object} v    遍历的对象
       * @param {Object} resp 函数返回对象
       * @param {Object} file 上传的文件
       */
      dynamicPicSuccess1(v,resp,file) {
        var index = v.index;
        this.pictures.couldChoice[index].picUrl = resp.data;
        this.refresh()
      },
      /**
       * 刷新组件
       */
      refresh(){
        this.isShow = false;
        this.isShow = true;
      },
      /**
       * 刷新当前页面缓存
       */
      reload(){
        this.add={}
        this.attrInfo=[]
        this.pictures=[]
        this.cats=[]
        this.attrMap={}
        this.attrMap=new Map();
        this.attrKey=[]
        this.addIds=[]
        this.step1=true
        this.step3=false
      },
      /**
       * 保存物品
       */
      saveGoods(){
        for (var i = 0; i < this.pictures.mustChoice.length; i++) {
          let m = this.pictures.mustChoice[i]
            console.log(this.pictures.mustChoice)
          if(m.picUrl==null||m.picUrl==undefined){
            console.log(m)
            this.$message({
              message: "存在未上传的必选鉴定图",
              showClose: true,
              type: 'error'
            });
            return;
          }
        }
        this.$http.post("/goods/goods/saveGoods").then(resp=>{
          if(resp.data.code==200){
            this.$message({
              message: "新增成功",
              showClose: true,
              type: 'success'
            });
            this.$router.push("/goods")
          }else{
            this.$message({
              message: resp.data.message,
              showClose: true,
              type: 'error'
            });
          }
        })
      },
      /**
       * 新增物品
       */
      addGoods(){
        let obj= Object.create(null);
            for (let[k,v] of this.attrMap) {
              obj[k] = v;
            }
        this.add.attribute=JSON.stringify(obj)
        this.$http.post("/goods/goods/addGoods",this.add).then(resp=>{
        })
      },
      /**
       * 通过id查出应上传的鉴定图集合
       * @param {Object} id 类别id
       */
      findCatPictureByCatId(id){
        this.$http.get("/goods/goodsCatPicture/findCatPictureByCatId",{
          params:{
            catId:id
          }
        }).then(resp=>{
          this.pictures=resp.data.data
        })
      },
      /**
       * 存储属性值的map集合
       * @param {Object} id     key
       * @param {Object} value  value
       */
      setMap(id,value){
        this.attrMap.set(id,value)
        this.attrKey.push(id)
        console.log(this.attrMap)
        console.log(this.attrKey)
      },
      /**
       * 查找所有品牌
       */
      findBrandByIds(){
        this.$http.get("/goods/goodsBrandCat/findBrandIdsByCatId",{
          params:{
            catId:this.add.catId
          }
        }).then(resp=>{
          let ids=resp.data.data
          this.$http.post("/goods/brand/findBrandByIds",ids).then(resp=>{
            this.brand = resp.data.data
          })
        })
      },
      /**
       * 查找品牌对应的类别集合
       * @param {Object} brandId  品牌id
       */
      findCatTree(brandId){
        this.$http.get("/goods/goodsCat/findCatTree",{
          params:{
            brandId:brandId
          }
        }).then(resp=>{
          this.cats=resp.data.data
        })
    },
      /**
       * 跳转下一步
       */
      nextPage(){
        console.log(this.add.brandId+":"+this.add.groupId)
        if(this.add.brandId==null||this.addIds.length<3){
          this.$message({
            message: "必须完善品牌及类别信息",
            showClose: true,
            type: 'error'
          });
        }else{
          this.step1=false
          this.step2=true
        }
      },
      /**
       * 跳转下一步
       */
      nextPage2(){
        for (var i = 0; i < this.attrInfo.length; i++) {
          let id = this.attrInfo[i].attributeId
          console.log(id)
          if(!this.attrKey.includes(id)){
            this.$message({
              message: "必须完善所有属性信息",
              showClose: true,
              type: 'error'
            });
            return;
          }
        }
        this.step2=false
        this.step3=true
        this.addGoods()
        this.findCatPictureByCatId(this.add.subCatId)
      },
      /**
       * 通过选定属性组id查询对应的属性集合
       * @param {Object} id 属性组id
       */
      findConfigByGroupId(){
        let id = this.add.groupId
        this.$http.get("/goods/attributeConfig/findConfigByGroupId",{
          params:{
            groupId:id
          }
        }).then(resp=>{
          if(resp.data.code!=200){
            this.$message({
              message: resp.data.message,
              showClose: true,
              type: 'error'
            });
          }else{
            let data = resp.data.data
            this.attrInfo = []
            for (var i = 0; i < data.length; i++) {
              let info = data[i].infoDto
              if(info.attributeType==2){
                if(info.value==null||undefined){
                  info.value = []
                }
              }
              this.attrInfo.push(info)
            }
          }
        })
      }
    },
    created(){
      this.findBrandByIds()
      this.findCatTree()
      /**
       * 实例化attrMap对象
       */
      this.attrMap=new Map();
      /**
       * 向header存值
       */
      this.header["token"] = localStorage.getItem("token")
    }
  }
</script>

<style scoped>
	.cl::after{
	  content: '';
	  display: block;
	  clear: both;
	}
	.lf{
		float: left;
	}
	.rf{
		float: right;
	}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #8c939d;
    border-radius: 6px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-input__inner{
    font-size: 18px;
    width: 350px;
  }
  .el-textarea__inner{
    font-size: 18px;
  }
  .el-radio__label{
    font-size: 18px;
  }
  .el-checkbox__label{
    font-size: 18px;
  }
</style>
